<script setup>
import {
  NForm,
  NInput,
  NFormItem,
  NButton,
  NSpace,
  NDataTable,
  NCard,
  NDivider,
  NIcon,
  useMessage,
} from "naive-ui";

import { AddAlt } from "@vicons/carbon";
import { ref, reactive, h } from "vue";
import userInfoModal from "./components/userInfo.vue";
import { register, queryUser, deleteUser } from "@/api/user.js";


// showModal：模态框控制开关
let showModal = ref(false);
// isRegister: true时模态框是注册，false时模态框是修改
let isRegister = ref(true);

const queryParam = reactive({
  userName: "",
  name: "",
  apartment: "",
});

let userInfo = reactive({});

// 表格列设置
let columns = [
  {
    title: "操作",
    key: "operation",
    align: "center"
  },
  {
    title: "用户名",
    dataIndex: "userName",
    key: "userName",
    align: "center",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "部门",
    dataIndex: "apartment",
    key: "apartment",
    align: "center",
  },
  {
    title: "权限",
    dataIndex: "authority",
    align: "center",
  },
];

// 用户查询表格数据变量
// let userData = ref([]);
let userData = ref([
  {
    key: '1',
    userName: 'tets',
    name: 'sasdf',
    apartment: '11',
    authority: '11'
  }
]);

// 表格分页设置
const pagination = reactive({
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true,
  itemCount: 10,
});

// table参数中rowkey赋值
const rowkey = (rowData) => rowData.userName;

// 打开注册模态框
const registerUser = () => {
  showModal.value = true
  isRegister.value = true
}

// 关闭模态框
const closeModal = ()=>{
  showModal.value = false;
}

// 查询用户，暂时只能以登录名查询
const query = () => {
  queryUser({ "userName": queryParam.userName })
    .then((response) => {
      let res = response.data.data;
      res = res.map((value, index) => {
        value["key"] = index + 1;
      });
      userData.value = response.data.data;
    })
    .catch((error) => {
      console.log(error);
    });
};

// 注册用户界面重置，清空输入框
const reset = () => Object.keys(newUser).forEach((key) => (newUser[key] = ""));

// 更新用户信息
const updateUser = (row) => {
  userInfo = row
  console.log('row:',row)
  isRegister.value = false
  showModal.value = true
}

// 删除用户
const delUser = (row) => {
  deleteUser({ "userName": row.userName })
    .then((response) => {
      let res = response.data.data;
      res = res.map((value, index) => {
        value["order"] = index + 1;
      });
      userData.value = response.data.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<template>
  <n-space justify="space-around" class="search">
    <n-form-item label="用户名" label-placement="left" class="ninput">
      <n-input
        placeholder="用户名"
        clearable
        v-model:value="queryParam.userName"
      />
    </n-form-item>
    <n-form-item label="姓名" label-placement="left" class="ninput">
      <n-input placeholder="姓名" clearable v-model:value="queryParam.name" />
    </n-form-item>
    <n-form-item label="部门" label-placement="left" class="ninput">
      <n-input
        placeholder="部门"
        clearable
        v-model:value="queryParam.apartment"
      />
    </n-form-item>
    <n-button type="primary" @click="query">查找</n-button>
  </n-space>
  <n-divider />
  <div class="tool">
    <n-button text @click="registerUser">
      <n-icon style="margin-right: 2px">
        <AddAlt color="green" />
      </n-icon>
      注册用户
    </n-button>
  </div>
  <a-table
    :columns="columns"
    :data-source="userData"
  >
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <div>tetst</div>
        <a>action</a>
        <!-- <a-button type="primary">编辑</a-button> -->
      </template>
    </template>
  </a-table>

  <userInfoModal :isRegister="isRegister" :visible="showModal" :userinfo="userInfo" @closeModal="closeModal" />

</template>

<style scoped lang="scss">
.search {
  width: 100%;
  display: flex;
  align-items: center;

  .ninput {
    display: flex;
    align-items: center;
  }
}
.tool {
  width: 100%;
  margin-bottom: 15px;
}

.footer {
  display: flex;
  justify-content: space-around;
}

:deep(.columns) {
  color: rgba(0, 128, 0, 0.75) !important;
}

:deep(.rowClass td) {
  color: rgba(255, 0, 0, 0.75) !important;
}

:deep(.n-card-header__main) {
  color: red !important;
  text-align: center !important;
}
</style>
